<template>
    <div class="register" style="margin: 0 2%;height: 150px;overflow-y: auto;">
        <el-form ref="registerForm" v-loading="loading_from" :model="registerForm" :rules="registerRules" class="register-form">

            <el-row>
                <el-col :span="6"><div class="grid-content bg-purple">
                    <el-form-item label="订单编号" prop="order_number">
                        <el-input v-model="registerForm.order_number" type="text" placeholder="请输入订单号" @change="handleChange2">
                        </el-input>
                    </el-form-item>
                </div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light">
                    <el-form-item label="店铺" prop="shop">
                        <el-select v-model="registerForm.shop_name" placeholder="请选择店铺" @change="handleChange2">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light">
                    <el-form-item label="退款金额" prop="amount">
                        <el-input v-model.trim="registerForm.amount" placeholder="请输入退款金额"></el-input>
                        <!-- <el-input-number style="width: 100%;" v-model.trim="registerForm.amount" :step="0.01" placeholder="请输入退款金额" clearable></el-input-number> -->
                        <!-- <el-input
                            v-model="registerForm.amount"
                            type="number"
                            style="width: 100%;"
                            :step="0.01"
                            placeholder="请输入退款金额"
                            clearable
                            @input="handleInput"
                        ></el-input> -->
                    </el-form-item>
                </div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light">
                    <el-form-item label="币种" prop="currency">
                        <el-select v-model="registerForm.currency" placeholder="请选择币种">
                            <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div></el-col>
                </el-row>
                <el-row>
                <el-col :span="12"><div class="grid-content bg-purple-light">
                    <el-form-item label="退款原因" prop="ReasonForRefund">
                            <!-- multiple -->
                            <!-- :multiple-limit="3" -->
                            <el-select 
                                    v-model="registerForm.ReasonForRefund"
                                    filterable
                                    collapse-tags
                                    clearable
                                    @change="handleChange"
                                    placeholder="请选择退款原因">
                                <el-option
                                v-for="item in refunds"
                                :key="item.id"
                                :label="item.title"
                                :value="item.id">
                                </el-option>
                            </el-select>
                    </el-form-item>
                </div></el-col>
                <el-col :span="12"><div class="grid-content bg-purple-light">
                    <el-form-item label="退款意向" prop="SpecificReasons">
                        <el-select v-model="registerForm.SpecificReasons" placeholder="请选择退款意向">
                            <el-option
                            v-for="item in SpecificReasons2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div></el-col>
                <el-col :span="12" v-if="SupplementaryStatus == true"><div class="grid-content bg-purple-light">
                    <el-form-item label="补充描述" prop="Supplementary">
                        <!-- <el-input v-model.trim="registerForm.Supplementary" placeholder="请添加补充描述"></el-input> -->
                        <el-input type="textarea" v-model="registerForm.Supplementary" :rows="2" placeholder="请添加补充描述"></el-input>
                    </el-form-item>
                </div></el-col>
                <el-col :span="12" v-if="SupplementarySku == true"><div class="grid-content bg-purple-light">
                    <el-form-item label="产品sku" prop="ProductSku">
                        <el-select 
                                v-model="registerForm.ProductSku"
                                multiple
                                filterable
                                collapse-tags
                                clearable
                                placeholder="请选择产品sku">
                            <el-option
                            v-for="item in ProductSkus"
                            :key="item.id"
                            :label="item.sku"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div></el-col>
                <el-col :span="12"><div class="grid-content bg-purple-light">
                    <el-form-item>
                        <el-button :loading="loading" size="medium" type="primary" style="width: 100%" @click.native.prevent="Refund">
                            <span v-if="!loading">提 交</span>
                            <span v-else>正 在 提 交...</span>
                        </el-button>
                    </el-form-item>
                </div></el-col>
            </el-row>
            
            <!-- <el-form-item label="店铺" prop="shop_name">
                <el-input v-model.trim="registerForm.shop_name" disabled></el-input>
            </el-form-item>
            
            <el-form-item label="订单ID" prop="order_id">
                <el-input v-model.trim="registerForm.order_id" disabled></el-input>
            </el-form-item>
            <el-form-item label="总金额" prop="total_price">
                <el-input v-model.trim="registerForm.total_price" disabled></el-input>
            </el-form-item> -->

        </el-form>
    </div>
</template>

<script>
import { RegistrationRefund,RegistrationRefundinfo } from '@/api/login'
import { ReasonForRefund,getProductSkus,CustomerRefunds } from '@/api/orderSource'
export default {
    name: 'Refund',
    data() {
        return {
            SupplementaryStatus: false,
            SupplementarySku: false,
            loading_from: true,
            codeUrl: '',
            registerForm: {
                currency: "",
                shop_name: "",
                amount: "",
                order_number: '',
                order_id: '',
                name: '',
                total_price: '',
                payment_gateway_names: '',
            },
            registerRules: {
                order_number: [
                    { required: true, trigger: 'blur', message: '请输入订单编号' },
                ],
            },
            loading: false,
            options: [{
                    value: 'SheCurve',
                    label: 'SheCurve'
                }, {
                    value: 'woobilly',
                    label: 'woobilly'
                }, {
                    value: 'LilyLove',
                    label: 'LilyLove'
                }, {
                    value: 'kisslove',
                    label: 'kisslove'
                },
            ],
            refunds: [],
            ProductSkus: [],
            options2: [{
                    value: 'USD',
                    label: 'USD'
                },{
                    value: 'CAD',
                    label: 'CAD'
                },{
                    value: 'AUD',
                    label: 'AUD'
                },
            ],
            SpecificReasons2: [{
                    value: '有退款意向',
                    label: '有退款意向'
                },{
                    value: '确认退款',
                    label: '确认退款'
                },{
                    value: '产品问题反馈',
                    label: '产品问题反馈'
                },{
                    value: '补发',
                    label: '补发'
                },
            ],
        }
    },
    async created() {
        try {
            const ReasonForRefundData = await ReasonForRefund()
            this.refunds = ReasonForRefundData ?? []
        } catch (error) {
        }
        this.getDetail()
    },

    methods: {
        // handleInput(value) {
        //     if (value !== '') {
        //         const formattedValue = parseFloat(value).toFixed(2); // 保留两位小数
        //         this.registerForm.amount = isNaN(formattedValue) ? '' : formattedValue; // 防止 NaN
        //     } else {
        //         this.registerForm.amount = ''; // 清空时处理
        //     }
        // },
        getDetail() {
            this.loading_from = true
            //获取get链接参数
            const queryString = window.location.search.substring(1);
            const params = new URLSearchParams(queryString);
            const result = {};
            params.forEach((value, key) => {
                result[key] = value;
            });
            RegistrationRefundinfo(result)
                .then(res => {
                    this.registerForm.order_number = res.data.order_number;
                    //this.registerForm.order_id = res.data.order_id;
                    //this.registerForm.total_price = res.data.total_price;
                    //this.registerForm.payment_gateway_names = res.data.payment_gateway_names;
                    this.registerForm.shop_name = res.data.shop_name;
                    this.registerForm.slug = res.data.slug;
                    CustomerRefunds(this.registerForm)
                        .then(res => {
                            this.registerForm = res.data ?? []
                            this.handleChange(this.registerForm.ReasonForRefund)
                        })
                })
                .finally(() => {
                    this.loading_from = false
                })
        },
        handleChange2() {
            this.loading_from = true
            getProductSkus(this.registerForm)
                .then(res => {
                    this.ProductSkus = res.data ?? []
                })
                .finally(() => {
                })
            CustomerRefunds(this.registerForm)
                .then(res => {
                    this.registerForm = res.data ?? []
                    this.handleChange(this.registerForm.ReasonForRefund)
                })
                .finally(() => {
                    this.loading_from = false
                })
        },
        handleChange(value) {
            this.SupplementaryStatus = false;
            this.SupplementarySku = false;

            // 新增逻辑：检查 value 数组中是否包含值 14
            if (value == 24) {
                this.SupplementaryStatus = true;
                this.SupplementarySku = true;
            } 

            const specialValuesForSku = [21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44];
            if (specialValuesForSku.includes(value)) {
                this.SupplementarySku = true;
            }
            const specialValuesForStatus = [21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,46,48];
            if (specialValuesForStatus.includes(value)) {
                this.SupplementaryStatus = true;
            }
            
            //查询sku列表
            getProductSkus(this.registerForm)
                .then(res => {
                    this.ProductSkus = res.data ?? []
                })
                .finally(() => {
                })
        },
        Refund() {
            this.loading = true
            RegistrationRefund(this.registerForm)
                .then(res => {
                    this.$message.success("操作成功")
                })
                .finally(() => {
                    this.loading = false
                })
        },
    },
}
</script>
<style scoped>
.el-col {
    border-radius: 4px;
}
</style>